<!doctype html> 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        
        <title>AGS Template</title>       
        <link type="text/css" rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link rel="stylesheet" type="text/css" href="css/jquery/ui.css">
        <link rel="stylesheet" type="text/css" href="css/jquery/scrollpane.css">
        <link rel="stylesheet" type="text/css" href="css/jquery/colorbox.css">
		<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Oxygen|Pontano+Sans|Codystar|Frijole">        
		
        <script>
			var region 		= 'eu';
			var realm 		= 'hellfire';
        </script>
        
		<!-- Third party scripts -->
        <script src="js/jquery/jquery.js"></script>
        <script src="js/jquery/cookie.js"></script>
        <script src="js/jquery/ui/jquery.ui.core.min.js"></script>
        <script src="js/jquery/ui/jquery.ui.widget.min.js"></script>      
        <script src="js/jquery/ui/jquery.ui.mouse.min.js"></script>
        <script src="js/jquery/ui/jquery.ui.position.min.js"></script>
        
        <script src="js/jquery/ui/jquery.ui.sortable.min.js"></script>
        <script src="js/jquery/ui/jquery.ui.draggable.min.js"></script>
        
		       
        <script src="js/jquery/scrollpane.js"></script>   
        <script src="js/jquery/scrollto.js"></script>      
        <script src="js/jquery/colorbox.js"></script>
        
        
        <!-- needed for AGS_Form -->
        <script src="js/jquery/ui/jquery.ui.autocomplete.min.js"></script>
        <script src="js/jquery/ui/jquery.ui.datepicker.min.js"></script>
        <script src="js/jquery/validate.js"></script>
        
        
        
        <!-- AGS Libraries -->
        <script src="js/AGS_Message.js"></script>
        <script src="js/AGS_Form.js"></script>
        <script src="js/config.js"></script>
        
        <!-- Init -->
        <script src="js/scripts.js"></script>

      
          
         <!--
             paginas die klaar moeten zijn:
<script src="js/modernizr.js"></script>
            - frontpage
            - forums
            - forums / view categorie
            - forums / view post
            - forums / add post | reply
            - account / register
            - account / characters
            - account / messages / inbox
            - account / messages / post
            - account / messages / view
            - account / applications
            - account / create application
            - account / settings
            - raids / calendar
            - raids / add raid
        -->
                    
    </head>    
    <body> 
    	<header class="top">
        	<img src="images/layout/logo.png" alt="Alea iacta est">
        </header>
        <div id="site">
        	<section id="top">  
                    	
                <nav>
                    <ul>
                        <li><a href="/">Home</a></li>
                        <li><a href="#">Information</a>
                        	<ul>
                            	<li><a href="grid.html">Gridview</a></li>
                                <li><a href="#">Join</a></li>
                                <li><a href="#">Members</a></li>
                                <li><a href="#">Rules</a></li>                                
                            </ul>
                        </li>
                        <li><a href="#">Forums</a></li>
                        <li><a href="#">Raiding</a>
                        	<ul>
                            	<li><a href="#">Calendar</a></li>
                                <li><a href="#">Activity</a></li>
                                <li><a href="#">Loot</a></li>                     
                            </ul>
                        </li>                      
                    </ul>
                </nav>
                
                <section id="account"> 
                	<figure class="avatar"><img src="data/avatars/2.jpg" alt="Ynnah"></figure>                    
                    <header class="shaman">Ynnah</header>
                    <span></span>
                    <p>No new messages</p> 
                </section> 
                  
                <section id="account_content">
                
                	<section class="login">
                    	<form action="index.html" method="post">
                        	<label for="email">Email:</label><br>
                            <input type="text" name="email" id="email"><br>
                            <br>
                            <label for="password">Password:</label><br>
                            <input type="password" name="password" id="password"><br>
                            <br>
                            <button class="button1" type="submit"><span>Login</span></button> <button class="button1" type="button"><span>New account</span></button>                          
                        </form>
                    </section>
                    
                    <section class="raid">
                        <img src="images/raid_icons/cata-bwd.png" alt="Blackwing Descent">                        
                        <p><a href="#">Blackwing Descent</a></p>
                        <p>2 hours, 3 minutes</p>
                        <p><span class="not_signed">Not signed</span> - <a href="#">Sign up</a></p>
                    </section> 
                                      
                    <section class="account">
                    	<ul>
                        	<li><span class="home"></span> <a href="#">Home</a></li>
                        	<li><span class="applications"></span> <a href="#">Your applications</a></li>
                        	<li><span class="messages"></span> <a href="#">Messages</a></li>
                            <li><span class="characters"></span> <a href="#">Characters</a></li>
                            <li><span class="filemanager"></span> <a href="#">Upload(s)</a></li> 
                            <li><span class="settings"></span> <a href="#">Settings</a></li>                                                       
                        </ul>
                    </section>
                    
                    <section class="display"></section>
                </section> 
                
                <section id="message">
                	<div>
                    	<div><img src="image.png" alt="Status image"></div>
                        <div>
                            <h3>Event subject</h3>
                            <p>Could not log you in!</p>
                            <a class="icon i-cross iconlink close-button"></a>
                        </div>
                    </div>
                </section>
                
            </section>
            <section id="content">
                <section id="news">                
                    <article class="newspost" id="post_1">
                        <header class="red folks">
                            <h2>Registration form</h2>                 
                        </header>
                        <section>
                        	<form class="AGS_Form" action="index.html" method="post" novalidate>
                            	<fieldset>
                                	<label>Personal details <span>Just the usual stuff</span></label>
                                    <section>
                                    	<label for="firstname">First name</label>
                                        <div><input name="firstname" type="text"></div>
                                    </section>
                                    <section>
                                    	<label for="date">Date of birth</label>
                                        <div><input type="date" name="date" id="date"></div>  
                                    </section>
                                    <section>
                                    	<label for="location">Location <span>Start by typing your city/town of residence</span></label>
                                        <div><input type="location" name="location" id="location"></div>
                                    </section>
                                 </fieldset>
                                 
                                 <fieldset>
                                	<label>Account details <span>Make sure you have a working email address</span></label>
                                    <section>
                                    	<label for="email">Email</label>
                                        <div><input type="email" name="email" id="email" placeholder="Email"></div>
                                    </section>
                                    <section>
                                    	<label for="password">Password</label>
                                        <div><input type="password" name="password" id="password"></div> 
                                    </section>
                                 </fieldset>
                                 
                                 <fieldset>
                                	<label>Character <span>Add a main character</span></label>
                                    <section>
                                    	<label for="firstname">Name</label>
                                        <div><input type="text"></div>
                                    </section>
                                    <section>
                                    	<label for="realm">Realm</label>
                                        <div><input type="realm" name="realm" id="email" placeholder="Hellfire"></div>  
                                    </section>
                                 </fieldset>
                                 
                                 <fieldset>
                                	<label>Form options <span>Add a main character</span></label>
                                    <section>
                                    	<label for="firstname">Tooltip <span>This should be your characters name in game</span></label>
                                        <div><input type="text"></div>
                                    </section>
                                    <section>
                                    	<label for="password">Placeholder</label>
                                        <div><input type="password"></div>  
                                    </section>
                                    <section>
                                    	<label for="password">Textarea</label>
                                        <div><textarea></textarea></div>  
                                    </section>
                                 </fieldset>
                                 
                                 <fieldset>
                                	<label>WYSIWYG Editor <span>Add a main character</span></label>
                                    <section>
                                    	<label for="firstname">Editor <span>This should be your characters name in game</span></label>
                                        <div><textarea></textarea></div>
                                    </section>
                                    <section>
                                    	<label for="firstname">Date</label>
                                        <div><textarea></textarea></div>
                                    </section>
                                 </fieldset>
                                 
                                 <fieldset>
                                 	<button type="submit" class="button1"><span>Register</span></button>
                                 </fieldset>
                            </form>
                        </section>
                        <footer>
                        	<p>
                            	<a class="button1 messageOpenener"><span>Add comment</span></a>
                                <a class="button1"><span>View comments (2)</span></a>
                            </p>
                        </footer>
                        <section class="comments">
                        	<article>
                            	<header>
                                	<img src="data/avatars/2.jpg" alt="Ynnah">
                                    <h2>Ynnah</h2>
                                    <p>Officer</p>
                                </header>
                                <div></div>
                                <section>
                                	<p>This is a comment</p>
                                </section>
                            </article>
                        	<article>
                            	<header>
                                	Avatar picture
                                </header>
                                <section>
                                	<p>This is a comment</p>
                                </section>
                            </article>
                        </section>
                    </article>   
                    
                    <article class="newspost" id="post_2">
                        <header class="blue dragon">
                            <h2>Glory of the Dragon Soul Raider Glory of the Dragon Soul Raider</h2>
                            <p>Posted on <time datetime="2009-06-29T23:31:45+01:00">June 29th 2009</time></p>
                        </header>
                        <section>
                        	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ullamcorper nisi sed mi fringilla pharetra. Mauris iaculis convallis urna, eu tempus leo pretium in. Sed consequat consequat faucibus. Pellentesque in mauris at lacus venenatis gravida. Nunc sodales nisi sit amet nisi sollicitudin gravida. Aliquam pulvinar faucibus dui sit amet lobortis. Mauris blandit libero in mauris accumsan feugiat. Nullam eleifend mattis rhoncus. Cras ut lorem non ligula lobortis tempor. Sed in consequat purus.</p>

							<p>	Vivamus quam tellus, imperdiet eleifend ornare eu, ultricies in mauris. Quisque viverra libero eu libero molestie vestibulum iaculis leo hendrerit. Nullam ultrices, eros malesuada faucibus consectetur, nisi felis tempus risus, in iaculis velit nisl in elit. In sed dui lorem. Ut lobortis nulla vel leo mattis vestibulum. Etiam viverra tincidunt ipsum, ut porttitor lacus vestibulum nec. Praesent sed metus augue. Sed in lorem et justo mattis suscipit at sed felis. Suspendisse potenti. </p>
                        </section>
                        <footer>
                        	<p>
                            	<a class="button1"><span>Add comment</span></a>
                                <a class="button1"><span>View comments (2)</span></a>
                            </p>
                        </footer>
                    </article>   
                    
                    <article class="newspost" id="post_3">
                        <header class="blue folks">
                            <h2>Madness of Deathwing heroic </h2>
                            <p>Posted on <time datetime="2009-06-29T23:31:45+01:00">June 29th 2009</time></p>
                        </header>
                        <section>
                        	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ullamcorper nisi sed mi fringilla pharetra. Mauris iaculis convallis urna, eu tempus leo pretium in. Sed consequat consequat faucibus. Pellentesque in mauris at lacus venenatis gravida. Nunc sodales nisi sit amet nisi sollicitudin gravida. Aliquam pulvinar faucibus dui sit amet lobortis. Mauris blandit libero in mauris accumsan feugiat. Nullam eleifend mattis rhoncus. Cras ut lorem non ligula lobortis tempor. Sed in consequat purus.</p>

							<p>	Vivamus quam tellus, imperdiet eleifend ornare eu, ultricies in mauris. Quisque viverra libero eu libero molestie vestibulum iaculis leo hendrerit. Nullam ultrices, eros malesuada faucibus consectetur, nisi felis tempus risus, in iaculis velit nisl in elit. In sed dui lorem. Ut lobortis nulla vel leo mattis vestibulum. Etiam viverra tincidunt ipsum, ut porttitor lacus vestibulum nec. Praesent sed metus augue. Sed in lorem et justo mattis suscipit at sed felis. Suspendisse potenti. </p>
                        </section>
                        <footer>
                        	<p>
                            	<a class="button1"><span>Add comment</span></a>
                                <a class="button1"><span>View comments (2)</span></a>
                            </p>
                        </footer>
                    </article>   
                           
                </section>
                
                <aside id="sidebars">
                
                    <section id="sb_1" class="shoutbox">
                        <header class="green panda" title="Click and hold to move">
                            <h2>Shoutbox</h2>
                            <p><strong>Last message:</strong> 1 Day ago</p>                            
                        </header>
                        <ul>
                        	<li>
                            	<span class="shaman">Ynnah</span> <span>says:</span>
                                <p>Hello all </p>
                            </li>
                            <li>
                            	<span class="druid">Glace</span> <span>says:</span>
                                <p>WTB MAGE FOR TODAYS RAID</p>
                            </li>
                            <li>
                            	<span class="shaman">Phreakk</span> <span>says:</span>
                                <p>as I thought got my lap back without OS... :/ </p>
                            </li>
                            <li>
                            	<span class="mage">Xtremal</span> <span>says:</span>
                                <p>sorry guys not gonna make it tonight still working over </p>
                            </li>                            
                            <li>
                            	<span class="warrior">Wfg</span> <span>says:</span>
                                <p>Bout Time, Gratz</p>
                            </li>                            
                            <li>
                            	<span class="shaman">Kaoswar</span> <span>says:</span>
                                <p>downloading updates but its taking its sweet time so dunno i can log on.. but soonish</p>
                            </li> 
                            <li>
                            	<span class="druid">Glace</span> <span>says:</span>
                                <p>WTB MAGE FOR TODAYS RAID</p>
                            </li>
                        	<li>
                            	<span class="shaman">Phreakk</span> <span>says:</span>
                                <p>WOOOHOOOOOAMBAK!WOOOHOOOOOWOOOHOOOOOAMBAK!WOOOHOOOOOWOOOHOOOOOAMBAK!WOOOHOOOOOWOOOHOOOOOAMBAK!WOOOHOOOOOWOOOHOOOOOAMBAK!WOOOHOOOOOWOOOHOOOOOAMBAK!WOOOHOOOOOWOOOHOOOOOAMBAK!WOOOHOOOOO AM BAK!WOOOHOOOOO AM BAK!WOOOHOOOOO AM BAK!WOOOHOOOOO AM BAK!WOOOHOOOOO AM BAK!WOOOHOOOOO AM BAK!</p>
                            </li>
                            <li>
                            	<span class="shaman">Phreakk</span> <span>says:</span>
                                <p>as I thought got my lap back without OS... :/ </p>
                            </li>
                            <li>
                            	<span class="mage">Xtremal</span> <span>says:</span>
                                <p>sorry guys not gonna make it tonight still working over </p>
                            </li>                            
                            <li>
                            	<span class="warrior">Wfg</span> <span>says:</span>
                                <p>Bout Time, Gratz</p>
                            </li>                            
                            <li>
                            	<span class="shaman">Kaoswar</span> <span>says:</span>
                                <p>downloading updates but its taking its sweet time so dunno i can log on.. but soonish</p>
                            </li>                            
                        </ul>
                        <p class="center"><a class="button1" href="#post-shoutbox-message"><span>Post a message</span></a></p>
                        <div style='display:none'>
                            <div id="post-shoutbox-message">
                                <h1>Post a shoutbox message</h1>
                                <form action="index.html" method="post">
                                	<label for="shoutbox_message">Message</label>
                                    <input type="text" name="shoutbox_message" id="shoutbox_message">
                                    <button class="button1"><span>Post message</span></button>
                                </form>
                            </div>
                        </div>
					</section>  
                                   
                    <section id="sb_2" class="forumposts">
                    	<header class="blue dragon" title="Click and hold to move">
                        	<h2>Forum posts</h2>
                        </header>
                        <ul>
                        	<li>
                                <figure class="avatar"><img src="data/avatars/2.jpg" alt="Ynnah"></figure>
                                <header>
                                	<h2 class="shaman">Ynnah</h2>
                                	<p>New website! New website! New website!</p> 
                                </header>
                                <p>2 Minutes ago</p>
                            </li>
                        	<li>
                                <figure class="avatar"><img src="data/avatars/1.jpg" alt="Yugo"></figure>
                                <header>
                                	<h2 class="monk">Yugo</h2>
                                	<p>New alt raid</p> 
                                </header>
                                <p>1 Hour ago</p>
                            </li>
                        	<li>
                                <figure class="avatar"><img src="data/avatars/3.jpg" alt="Depravity"></figure>
                                <header>
                                	<h2 class="priest">Depravity</h2>
                                	<p>Guild bank and other issues</p> 
                                </header>
                                <p>2 Hours ago</p>
                            </li>
                        	<li>
                                <figure class="avatar"><img src="data/avatars/4.jpg" alt="Coras"></figure>
                                <header>
                                	<h2 class="priest">Coras</h2>
                                	<p>Beta wave</p> 
                                </header>
                                <p>4 Hours ago</p>
                            </li>
                        	<li>
                                <figure class="avatar"><img src="data/avatars/5.jpg" alt="Held"></figure>
                                <header>
                                	<h2 class="warlock">Held</h2>
                                	<p>The new rules</p> 
                                </header>
                                <p>2 Days ago</p>
                            </li>
                        	<li>
                                <figure class="avatar"><img src="data/avatars/6.jpg" alt="Alatariel"></figure>
                                <header>
                                	<h2 class="rogue">Alatariel</h2>
                                	<p>Sorry i cant raid tonight</p> 
                                </header>
                                <p>1 week ago</p>
                            </li>
                        </ul>
                    </section>
                    
                    <section id="sb_3" class="recruitment">
                    	<header class="red folks" title="Click and hold to move">
                        	<h2>Recruiting</h2>
                        </header>
                        <ul class="fadeList">
                        	<li class="deathknight"><div><h3>Death Knight</h3> <p>Looking for a DPS DK</p></div></li>
                            <li class="druid"><div><h3>Druid</h3> <p>Healer and Tank</p></div></li>
                        	<!-- <li class="hunter"></li> -->
                        	<li class="mage"><div><h3>Mage</h3> <p>Any spec</p></div></li>
                            <li class="monk"><div><h3>Monk</h3> <p>Healer</p></div></li>
                            <!-- <li class="paladin"></li>
                            <li class="priest"></li>
                            <li class="rogue"></li>
                            <li class="shaman"></li>
                            <li class="warlock"></li> -->
                            <li class="warrior"><div><h3>Warrior</h3> <p>Arms warrior and a tank warrior</p></div></li>
                        </ul>
                    </section>
                    
                    <section id="sb_4" class="progress">
                    	<header class="green dragon" title="Click and hold to move">
                        	<h2>Progress</h2>
                            <p>Realm: 2 - EU: 304 - World: 44</p>
                        </header>
                        <ul class="fadeList">
                        	<li class="dragonsoul"><div><h3>T13: DS</h3> <p>Normal: 8/8 <br> Heroic: 8/8</p></div></li>
                            <li class="firelands"><div><h3>T12: FL</h3> <p>Normal: 8/8 <br> Heroic: 8/8</p></div></li>
                            <li class="blackwingdescent"><div><h3>T11: BWD</h3> <p>Normal: 4/4 <br> Heroic: 4/4</p></div></li>                            
                        </ul>
                    </section>                    
                    
                </aside>
                
        	</section>       
        </div>         
	</body>
</html>